<template>
  <div class="standard-management-container">
    <h1>标准管理</h1>
    
    <div class="search-and-buttons">
      <input type="text" class="search-input" placeholder="请输入搜索关键字" v-model="searchText">
      
      <div class="buttons">
        <button class="add-button" @click="showDialog">添加</button>
        <button class="import-excel-button" @click="triggerFileInput">导入Excel</button>
       <input type="file" ref="fileInput" @change="importFromExcel" style="display: none;" accept=".xlsx, .xls">
      </div>
    </div>

    <!-- 弹窗 -->
    <el-dialog title="添加标准" :visible.sync="dialogVisible">
      <el-form :model="form">
        <el-form-item label="大类" :label-width="formLabelWidth">
          <el-input v-model="form.category" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="产品名" :label-width="formLabelWidth">
          <el-input v-model="form.productName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="标准编号（含年号）" :label-width="formLabelWidth">
          <el-input v-model="form.standardNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="标准名称" :label-width="formLabelWidth">
          <el-input v-model="form.standardName" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addProject">确 定</el-button>
      </div>
    </el-dialog>
    
    <table class="standards-table">
      <thead>
        <tr>
          <th>序号</th>
          <th>大类</th>
          <th>产品名</th>
          <th>标准编号（含年号）</th>
          <th>标准名称</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in filteredItems" :key="item.id">
          <td>{{ index + 1 }}</td>
          <td>{{ item.category }}</td>
          <td>{{ item.productName }}</td>
          <td>{{ item.standardNumber }}</td>
          <td>{{ item.standardName }}</td>
          <td>
            <span class="action-link">
            <a href="javascript:void(0);" class="view-link" @click="showItem(item)">查看项目</a>
            </span>
            <span class="action-divider">|</span>
            <span class="action-link">
            <a href="javascript:void(0);" class="delete-link" @click="deleteItem(item)">删除</a>
            </span>
            <span class="action-divider">|</span>
            <span class="action-link">
            <a href="javascript:void(0);" class="sample-link" @click="showSample(item)">查看样品</a>
            </span>
            <!-- <button class="view-item-button" @click="showItem(item)">查看项目</button>
            <button class="delete-item-button" @click="deleteItem(item)">删除</button>
            <button class="view-sample-button" @click="showSample(item)">查看样品</button> -->
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>


<script>
import XLSX from 'xlsx';

export default {
  name: "StandardManagement",
  data() {
    return {
      items: [
        // 示例数据，实际数据应从后端获取
        { id: 1, category: '无源医疗器械', productName: '医用防护口罩', standardNumber: 'GB 19083-2023', standardName: '医用防护口罩' },
        { id: 2, category: '无源医疗器械', productName: '医用一次性防护服', standardNumber: 'GB 19083-2023', standardName: '医用一次性防护服' },
        { id: 3, category: '无源医疗器械', productName: '医用敷料', standardNumber: 'GB 16886-2023', standardName: '医用敷料' },
        // ... 其他数据行
      ],
      searchText: '',

      dialogVisible: false,
      form: {
        category: '',
        productName: '',
        standardNumber: '',
        standardName: ''
      },
      formLabelWidth: '120px'
    };
  },
  computed: {
    filteredItems() {
      if (!this.searchText) {
        return this.items;
      }
      return this.items.filter(item => {
        return Object.values(item).some(value =>
          value.toString().toLowerCase().includes(this.searchText.toLowerCase())
        );
      });
    }
  },
  methods: {
    showDialog() {
      this.dialogVisible = true;
    },
    addProject() {
      // 在这里处理添加逻辑，例如发送请求到服务器
      console.log('Adding project:', this.form);
      // 重置表单
      this.form = {
        category: '',
        productName: '',
        standardNumber: '',
        standardName: ''
      };
      // 关闭弹窗
      this.dialogVisible = false;
    },

    triggerFileInput() {
      // 触发隐藏的文件输入元素的点击事件
      this.$refs.fileInput.value = null; // 清空文件输入，以便可以选择相同的文件
      this.$refs.fileInput.click();
    },
    importFromExcel(event) {
      const file = event.target.files[0];
      if (!file) {
        return;
      }
      const reader = new FileReader();
      reader.onload = (e) => {
        const data = new Uint8Array(e.target.result);
        const workbook = XLSX.read(data, { type: 'array' });
        const sheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[sheetName];
        const json = XLSX.utils.sheet_to_json(worksheet, { header: 1 }); // 假设Excel没有标题行
        // 处理导入的数据
        this.processImportedData(json);
      };
      reader.readAsArrayBuffer(file);
    },
    processImportedData(data) {
      // 假设数据是一个二维数组，每个子数组代表一行
      // 如果Excel有标题行，header应该设置为1，那么这里从索引1开始取值
      this.items = data.map((row, index) => {
        return {
          id: index + 1, // 假设每行有一个唯一的ID
          category: row[0], // 假设第一列是类别
          productName: row[1], // 假设第二列是产品名
          standardNumber: row[2], // 假设第三列是标准编号
          standardName: row[3] // 假设第四列是标准名称
        };
      });
    },
    showItem(item) {
    // 使用 Vue Router 跳转到 standar.vue 组件
    this.$router.push({ name: 'Standard', params: { id: item.id } });
    },
    deleteItem(item) {
      // 删除项目的逻辑
      if (confirm('确定要删除此项目吗？')) {
        const index = this.items.indexOf(item);
        if (index !== -1) {
          this.items.splice(index, 1);
        }
      }
    },
    showSample(item) {
      // 显示样品的逻辑
      alert(`查看样品信息：${JSON.stringify(item)}`);
    }
  }
};
</script>

<style scoped>
.standard-management-container {
  max-width: 1200px;
  margin: auto;
  padding: 20px;
}

.search-and-buttons {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.search-input {
  flex-grow: 1;
  margin-right: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.buttons button {
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}


.add-button {
  background-color: #007bff;
  color: white;
}

.import-excel-button {
  background-color: #17a2b8;
  color: white;
}

.standards-table {
  width: 100%;
  border-collapse: collapse;
}

.standards-table th,
.standards-table td {
  padding: 10px;
  border: 1px solid #ddd;
  text-align: center;
}

.standards-table th {
  background-color: #f8f9fa;
}

/* 添加竖线和间距的样式 */
.action-link {
  margin: 0 5px; /* 添加间距 */
}

.action-divider {
  margin: 0 5px; /* 添加间距 */
  color: #ddd; /* 设置竖线颜色 */
}

/* 设置a标签的字体颜色 */
.view-link {
  color: green; /* 查看项目字体颜色 */
}

.delete-link {
  color: red; /* 删除字体颜色 */
}

.sample-link {
  color: rgb(239, 151, 18); /* 查看样品字体颜色 */
}

/* a标签的样式 */
.view-link,
.delete-link,
.sample-link {
  text-decoration: none; /* 移除下划线 */
  cursor: pointer;
}


/* .view-item-button {
  background-color: #28a745;
  color: white;
}

.delete-item-button {
  background-color: #dc3545;
  color: white;
}

.view-sample-button {
  background-color: #ffc107;
  color: black;
} */
</style>